<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/common/taglibs.jsp"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>系统管理</title>
<link href="${cdnctx}/dep/jquery/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
<%@ include file="/common/util.jsp"%>
<script type="text/javascript">
var traLightCodes = [];
var ledLightCodes = [];
//灯具的自动填充
var traLightCodes = eval('${traLightCodeInfo }');
var ledLightCodes = eval('${ledLightCodeInfo }');
  //控制灯具的删除
function deltr() {
  $(".ligthTr tr:gt(1):last").remove();
  $(".ligthTr tr:gt(1):last").remove();
}
function lightAutoComplete(){
  $("input[name='collectAreaItems.tralightCode']").autocomplete({
    source: traLightCodes,
    minLength: 0
  });  
  $("input[name='collectAreaItems.ledlightCode']").autocomplete({
    source: ledLightCodes,
    minLength: 0
  });
  //点击灯具输入框则自动弹出列表
  $("input[name='collectAreaItems.tralightCode']").focus(function() {
    $(this).autocomplete('search');
  });
  $("input[name='collectAreaItems.ledlightCode']").focus(function() {
    $(this).autocomplete('search');
  });
}
$(document).ready(function() {
  //网关的自动填充
  var gateways = eval('${gatewayInfo }');
  $( "#gatewayid" ).autocomplete({
    source: gateways,
    minLength: 0
  });
  $("#gatewayid").focus(function() {
      $(this).autocomplete('search');
  });
  //设备的自动填充
  var sensorIds = [];
  for(var i=1; i < 9; i++) {
    sensorIds.push(i+'');
  }
  $("#sensorid").autocomplete({
    source: sensorIds,
    minLength: 0
  });
  $("#sensorid").focus(function() {
      $(this).autocomplete('search');
  });
  //通道的自动填充
  var channeIds = [];
  for(var i=177; i < 185; i++) {
    channeIds.push(i+'');
  }
  $("#channelid").autocomplete({
    source: channeIds,
    minLength: 0
  });
  $("#channelid").focus(function() {
      $(this).autocomplete('search');
  });

  var lightCodeHtml = "<tr>"+
    "<td class='mainText'>"+
        "<label class='formlabel'>"+
            "<font color='red'>*</font>传统灯具：</label>"+
    "</td>"+
    "<td>"+
        "<input type='hidden' name='collectAreaItems.id' value='' />"+
        "<input type='text' name='collectAreaItems.tralightCode' value='' class='form_input large' '>&nbsp;"+
        "<font color='red'>*</font>数量："+
        "<input class='form_input' name='collectAreaItems.tranum' value='' type='text' style='width:50px' />&nbsp;"+
    "</td>"+
    "<td width='91'>"+
        "<button type='button' class='form_area_del_btn' onclick='deltr();'>删除</button>"+
    "</td>"+
"</tr>"+
"<tr>"+
    "<td width='91' height='36' class='mainText'>"+
        "<label class='formlabel'>"+
            "<font color='red'>*</font>LED灯具：</label>"+
    "</td>"+
    "<td>"+
        "<input type='text' name='collectAreaItems.ledlightCode' value='' class='form_input large' '>&nbsp;"+
        "<font color='red'>*</font>数量："+
        "<input class='form_input' name='collectAreaItems.lednum' value='' type='text' style='width:50px' />&nbsp;"+
    "</td>"+
"</tr>";
  $("#addtr").click(function(){
    $(".ligthTr").append(lightCodeHtml);
    lightAutoComplete();
  });
  //灯具自动完成
  lightAutoComplete();
  
  //是否判断
  $("#addCollectAreaForm").validate({
    // debug: true,
    rules: {
      'customerinfoid': {
        required: true,
      },
      'gatewayid': {
        required: true,
      },
      'sensorid': {
        required: true,
      },
      'channelid': {
        required: true,
      },
    },
    messages: {
      'customerinfoid': {
        required: "所属公司",
      },
      'gatewayid': {
        required: "网关ID",
      },
      'sensorid': {
        required: "设备ID",
      },
      'channelid': {
        required: "通道ID",
      },
    },
    submitHandler: function(form) {
      $("input[name='collectAreaItems.id']").each(function(i){
        $(this).attr("name", "collectAreaItems["+i+"].id");
      });
      $("input[name='collectAreaItems.tralightCode']").each(function(i){
        $(this).attr("name", "collectAreaItems["+i+"].tralightCode");
      });
      $("input[name='collectAreaItems.tranum']").each(function(i){
        $(this).attr("name", "collectAreaItems["+i+"].tranum");
      });
      $("input[name='collectAreaItems.ledlightCode']").each(function(i){
        $(this).attr("name", "collectAreaItems["+i+"].ledlightCode");
      });
      $("input[name='collectAreaItems.lednum']").each(function(i){
        $(this).attr("name", "collectAreaItems["+i+"].lednum");
      });

      form.submit();
    }
  });
  $("input[name='collectAreaItems.tralightCode']").rules("add", {
    required: true,
    existLightCode: [CONS_LIGHTENERGY_TRA],
    messages: {
      required: "传统灯具"
    }
  });
  $("input[name='collectAreaItems.tranum']").rules("add", {
    required: true,
    messages: {
      required: "传统灯具数量"
    }
  }); 
  $("input[name='collectAreaItems.ledlightCode']").rules("add", {
    required: true,
    existLightCode: [CONS_LIGHTENERGY_LED],
    messages: {
      required: "LED灯具"
    }
  });
  $("input[name='collectAreaItems.lednum']").rules("add", {
    required: true,
    messages: {
      required: " LED灯具数量"
    }
  });
});
</script>
</head>
<body class="main">
	<div class="-frame -style -luster" id="css_container">
		<!--首页框架页眉部分↓-->
		<%@ include file="/WEB-INF/pages/inc/header.jsp"%>
		<!--首页框架页眉部分↑-->

		<div class="content">

			<!-- Left导航菜单◎开始 -->
			<%@ include file="/WEB-INF/pages/inc/leftmenu.jsp"%>
			<!-- Left导航菜单◎结束 -->

			<div class="main-mid">
				<div class="pos"><img src="${cdnctx}/src/index/img/index.png"><a href="<%--${cdnctx}/system/systemMenu.shtml--%>">系统管理  ></a><a href="${cdnctx}/systemCollectArea/collectAreaList.shtml">采集区域管理</a><a>> <c:if test="${empty collectArea.id }">添加</c:if><c:if test="${not empty collectArea.id }">编辑</c:if>采集区域</a></div>
				
				<div class="css_contentDiv">
					<div class="searchDetailed">
					<form id="addCollectAreaForm" method="post" action="${cdnctx}/systemCollectArea/saveCollectArea.shtml">
						  <input type="hidden"  name="id" id="id" value="${collectArea.id}"/>
						  <table align="center" id="table" width="800" border="0" cellspacing="0" cellpadding="0">
             				 <tr>
             				 	 <td class="mainText"><label class="formlabel"><font color="red">*</font>所属公司：</label></td>
             				 	 <td>
             				 	 <select id="customerinfoid" name="customerinfoid" class="form_select large">
          							  <option value=''>--请选择--</option>
          								<c:forEach items="${companyList}" var="entity"><option value="${entity.id}" <c:if test="${entity.id==collectArea.customerinfoid}">selected</c:if>>${entity.customername}</option></c:forEach>
			                 </select>
             				 	 </td>
             				 </tr>
             				 <tr>
             				 	 <td class="mainText"><label class="formlabel"><font color="red">*</font>网关ID：</label></td>
             				 	 <td>
             				 	 <input type="text" class="form_input large" name="gatewayid" id="gatewayid" value="${collectArea.gatewayid}"/>
             				 	 </td>
             				 </tr>
             				 <tr>
             				 	 <td class="mainText"><label class="formlabel"><font color="red">*</font>设备ID：</label></td>
             				 	 <td>
             				 	 <input type="text" class="form_input large"  name="sensorid" id="sensorid" value="${collectArea.sensorid}" maxlength="40"  />
             				 	 </td>
             				 </tr>
             				 
             				  <tr>
             				 	 <td class="mainText"><label class="formlabel"><font color="red">*</font>通道ID：</label></td>
             				 	 <td>
             				 	 <input type="text" class="form_input large"  name="channelid" id="channelid" value="${collectArea.channelid}" maxlength="40"  />
             				 	 </td>
             				 </tr>
             				 
             				  <tr>
             				 	 <td class="mainText"> <label class="formlabel">采集区域名：</label></td>
             				 	 <td>
             				 	 <input type="text" class="form_input large"   id="collectareaname" name="collectareaname" value="${collectArea.collectareaname}" maxlength="100"  onblur="" onmouseout=""/>
             				 	 </td>
             				 </tr>
             				 
             				 <tr>
             				 	 <td class="mainText"> <label class="formlabel">备注：</label></td>
             				 	 <td>
             				 	 <input type="text" class="form_input large"   id="memo" name="memo" value="${collectArea.memo}" maxlength="500"  onblur="" onmouseout=""/>
             				 	 </td>
             				 </tr>
                     <tbody class="ligthTr">
                      <c:if test="${not empty(collectAreaItems) }">
                        <c:forEach items="${collectAreaItems}" var="entity" varStatus="status">
                        <tr>
                          <td class="mainText"><label class="formlabel"><font color="red">*</font>传统灯具：</label></td>
                          <td>
                              <input type="hidden" name="collectAreaItems.id" value="${entity.id }"/>
                              <input type="text" name="collectAreaItems.tralightCode" value="${entity.tralightCode }" class="form_input large"  >
                              <font color="red">*</font>数量：<input class="form_input" name="collectAreaItems.tranum" value="${entity.tranum }"type="text" style="width:50px"/>&nbsp;
                          </td>
                          <td width="91"><button type="button" class="form_area_del_btn" onclick="deltr();">删除</button>
                          </td>
                       </tr>
                       <tr>
                          <td class="mainText">
                            <label class="formlabel"><font color="red">*</font>LED灯具：</label>
                          </td>
                          <td>
                            <input type="text" name="collectAreaItems.ledlightCode" value="${entity.ledlightCode }" class="form_input large">
                            <font color="red">*</font>数量：<input class="form_input" name="collectAreaItems.lednum" value="${entity.lednum }"type="text" style="width:50px"/>&nbsp;
                          </td>
                       </tr>
                        </c:forEach>
                      </c:if>
                      <c:if test="${empty(collectAreaItems) }">
               				 <tr>
               				    <td class="mainText"><label class="formlabel"><font color="red">*</font>传统灯具：</label></td>
      					          <td>
                              <input type="hidden" name="collectAreaItems.id" value=""
      							          ><input type="text" name="collectAreaItems.tralightCode" value="" class="form_input large"  >
      		                  	<font color="red">*</font>数量：<input class="form_input" name="collectAreaItems.tranum" value=""type="text" style="width:50px"/>&nbsp;
      		                </td>
                          <td width="91"><button type="button" class="form_area_del_btn" onclick="deltr();">删除</button>
      				 		        </td>
               				 </tr>
               				 <tr>
               				    <td class="mainText">
                            <label class="formlabel"><font color="red">*</font>LED灯具：</label>
                          </td>
  						            <td>
                            <input type="text" name="collectAreaItems.ledlightCode" value="" class="form_input large"  >
                            <font color="red">*</font>数量：<input class="form_input" name="collectAreaItems.lednum" value=""type="text" style="width:50px"/>&nbsp;
  						            </td>
               				 </tr>
                      </c:if>
                     </tbody>

                     <tr>
                       <td></td>
                       <td><button id="addtr" class="form_area_add_btn" type="button">新增</button></td>
                     </tr>
             				<tr>
             				  <td></td>
						          <td>
				                <input type="submit" class="form_save" value="保&nbsp;存"/>
						            <input type="reset" class="form_cancle" value="取&nbsp;消"/>
				              </td>
             				</tr>
             			</table>
              		</form>
              		</div>
				</div>
			</div>

		</div>

		<!--首页框架页尾部分↓-->
		<%@ include file="/WEB-INF/pages/inc/footer.jsp"%>
		<!--首页框架页尾部分↑-->
	</div>
</body>
</html>